<template>
	<p style="font-weight: bold">新增产品</p>
	<el-form
		:inline="true"
		ref="ruleFormRef"
		style=""
		:model="formProduct"
		:rules="rules"
		label-width="auto"
		class="form-product"
		status-icon
		require-asterisk-position="left"
		size="small"
		:label-position="'left'"
	>
		<el-row>
			<el-col :span="12">
				<el-form-item label="产品名称" prop="name" style="width: 100%">
					<el-input v-model="formProduct.name" class="txt-name" />
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="产品编码" prop="code" style="flex-wrap: nowrap">
					<el-input v-model="formProduct.code" />
					<el-button type="primary" @click="generateCode">自动编码</el-button>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row></el-row>
		<!-- <el-card>
				<template #header>
					<div class="card-header">
						<span>组件</span>
					</div>
				</template>
				<el-row
					v-for="componentItem in formProduct.components"
					align="middle"
					style="flex-wrap: nowrap"
				>
					<el-col span="8">
						<el-form-item label="组件名称" prop="componentName">
							<el-input v-model="componentItem.name" />
						</el-form-item>
					</el-col>
					<el-col span="8">
						<el-form-item label="组件编码" prop="componentCode">
							<el-input v-model="componentItem.code" />
						</el-form-item>
					</el-col>
					<el-col span="8">
						<el-form-item label="上一级组件" prop="componentPrev" style="margin-right: 3px">
							<el-input v-model="componentItem.name" />
						</el-form-item>
						<el-form-item>
							<el-button type="primary" :icon="Minus" @click="removeComponent(componentItem)" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-button type="primary" :icon="Plus" @click="addComponent" />
				</el-row>
			</el-card> -->
		<el-row style="margin-top: 10px">
			<el-col :span="12">
				<el-form-item label="技术要求" prop="name" style="width: 100%">
					<el-input
						type="textarea"
						rows="5"
						class="txt-tech-requirement"
						v-model="formProduct.name"
					/>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="附件" prop="name">
					<upload :fileList="formProduct.files" />
				</el-form-item>
			</el-col>
		</el-row>
		<el-row style="margin-top: 10px">
			<el-col :offset="12">
				<el-button size="default" type="success" @click="saveProduct">保存并新增产品</el-button>
				<el-button size="large" @click="handleCancel">返回</el-button>
			</el-col>
		</el-row>
	</el-form>
	<el-card style="margin-top: 20px">
		<template #header>
			<p>产品配置表</p>
		</template>
		<div>
			<el-input
				size="small"
				style="width: 200px; margin-right: 5px"
				placeholder="产品-组件 零件搜索"
				:suffix-icon="Search"
			/>
			<el-button
				type="primary"
				size="small"
				:icon="Plus"
				@click="handleOpenCreateComponent"
			></el-button>
			<!-- <el-button type="success" size="small" :icon="Edit" @click="handleOpenEditProduct">
					修改
				</el-button>
				<el-button type="danger" size="small" :icon="Delete" :disabled="!selectedProducts.length">
					删除
				</el-button> -->
		</div>
		<productConfigTable
			:productConfigDataList="productConfigDataList"
			:productComponentList="productComponentList"
			@handleProductsSelectionChange="handleProductsSelectionChange"
			@editComponent="handleEditComponent"
		/>
	</el-card>

	<div class="table-footer">
		<!-- <el-button size="large" @click="handleCancel">返回</el-button> -->
		<!-- <el-button size="large" class="btn-next" type="primary" @click="handleNext">下一步</el-button> -->
	</div>

	<componentDialog :conponentDialogConfig="conponentDialogConfig" @cancel="handleCancelComponent" />
</template>
<style lang="scss" scoped>
.dialog-product-config {
	width: 800px;
}
.txt-name,
.txt-tech-requirement {
	width: 60%;
}

.table-footer {
	display: block;
	text-align: center;
	margin: 20px auto;

	.btn-next {
		margin-left: 50px;
	}
}
</style>
<script lang="ts" setup>
import { Plus, Minus, Edit, Delete, Search } from '@element-plus/icons-vue';
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import productConfigTable from './productConfigTable.vue';
import type { ProductConfig } from '../mockdata';
import { productConfigDataList, productComponentList } from '../mockdata';
import upload from './upload.vue';
import componentDialog from './componentDialog.vue';

const props = defineProps({
	productDialogConfig: {
		type: Object,
		default: {
			visible: false,
			title: '',
		},
	},
});

const $emits = defineEmits(['cancel']);

const formProduct = reactive<ProductConfig>({
	name: '',
	code: '',
	components: [{ name: '', code: '', prev: '', productID: '', productName: '' }],
	files: [],
});

const rules = reactive({
	name: {
		required: true,
		message: '必填',
	},
	code: {
		required: true,
		message: '必填',
	},
	componentName: {
		required: true,
		message: '组件名称必填',
	},
	componentCode: {
		required: true,
		message: '组件编码必填',
	},
});

/**
 * 生成编码
 */
const generateCode = () => {
	//TODO 请求服务器生成一个编码
	ElMessage({
		message: '已为您自动生成一个编码',
	});
	formProduct.code = 'TSB' + (parseInt(Math.random() * 100000000 + '') % 1000000);
};

// const removeComponent = item => {
// 	const index = formProduct.components.findIndex(v => v === item);
// 	formProduct.components.splice(index, 1);
// };

/**
 * 选中的产品数量
 */
const selectedProducts = ref([]);

const handleProductsSelectionChange = _selections => {
	selectedProducts.value = _selections;
};

//打开修改产品对话框
const handleOpenEditProduct = () => {
	if (selectedProducts.value.length != 1) {
		return ElMessage({
			message: '请选中一个产品进行修改',
			type: 'error',
		});
	}

	props.productDialogConfig.visible = true;
	props.productDialogConfig.title = '修改产品';
};

const conponentDialogConfig = reactive({
	visible: false,
	title: '',
});

/**
 * 保存并新增产品
 */
const saveProduct = () => {
	ElMessage({
		message: '保存成功',
		type: 'success',
	});
	// setTimeout(() => {
	// 	$emits('cancel');
	// }, 500);
};

// 新增组件
const handleOpenCreateComponent = () => {
	conponentDialogConfig.visible = true;
	conponentDialogConfig.title = '新增组件';
};

// 取消
const handleCancelComponent = () => {
	conponentDialogConfig.visible = false;
};

// 修改组件
const handleEditComponent = rowData => {
	conponentDialogConfig.visible = true;
	conponentDialogConfig.title = '修改组件-' + rowData.name;
};

const handleCancel = () => {
	$emits('cancel');
};

const handleNext = () => {};
</script>
